<template>

  <el-row>
    <Spin v-show="isSpinShow" fix size="large">
    </Spin>
    <el-tabs tab-position="left" style="padding-top: 20px">
      <el-tab-pane label="">说明:到期提醒的任务需要在流程设计器中配置到期时间，否则不生效。</el-tab-pane>
    </el-tabs>
    <Card style="margin-left: 20px;margin-bottom: 10px;margin-top: 10px">
      <p slot="title">到期提醒设置</p>
      <div style="margin-top: 20px;margin-left: 35px">
        <el-form ref="addForm" :model="addForm" label-width="120px" style="display: block" :rules="rules">

          <el-form-item label="可选节点" prop="chooseNode">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="addForm.nodes" @change="handleCheckedCitiesChange">
              <el-checkbox :key="item.id" :label="item.id" v-for="(item,index) in tableData">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item  label="到期时间">
            <el-col :span="3">
              <el-input  v-model="addForm.day" ></el-input>
            </el-col>
            <el-col class="line" :span="1">&nbsp;&nbsp;天</el-col>
            <el-col :span="3">
              <el-input  v-model="addForm.hour"></el-input>
            </el-col>
            <el-col :span="1">
              <el-col class="line" :span="2">&nbsp;&nbsp;时</el-col>
            </el-col>
            <el-col :span="3">
              <el-input  v-model="addForm.min"></el-input>
            </el-col>
            <el-col :span="1">
              <el-col class="line" :span="2">&nbsp;&nbsp;分</el-col>
            </el-col>
          </el-form-item>

          <el-form-item label="邮件通知" :prop="addForm.emailCreated.toString()">
            <el-switch v-model="addForm.emailCreated"></el-switch>
          </el-form-item>
          <el-form-item v-if="addForm.emailCreated" label="邮件模板" :prop="addForm.emailCreatedContent">
            <el-input type="textarea" v-model="addForm.emailCreatedContent"></el-input>
          </el-form-item>
          <el-form-item label="短信通知" :prop="addForm.msgCreated.toString()">
            <el-switch v-model="addForm.msgCreated"></el-switch>
          </el-form-item>
          <el-form-item v-if="addForm.msgCreated" label="短信通知模板" :prop="addForm.msgCreatedContent">
            <el-input type="textarea" v-model="addForm.msgCreatedContent"></el-input>
          </el-form-item>
          <el-form-item label="站内信通知" :prop="addForm.mailCreated.toString()">
            <el-switch v-model="addForm.mailCreated"></el-switch>
          </el-form-item>
          <el-form-item v-if="addForm.mailCreated" label="站内信通知模板" :prop="addForm.mailCreatedContent">
            <el-input type="textarea" v-model="addForm.mailCreatedContent"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" @click="go">
              <Icon type="md-close"/>
              关闭
            </el-button>
          </el-form-item>


        </el-form>
      </div>
    </Card>


    <user-multiple-dialog
      :on-ok="confirmDialogEvent"
      :show.sync="show"
      :exist-data="existData"
      :node-index="index"
      :alias="alias"
    />
  </el-row>


</template>

<script>
  import {getAllActivity, saveModelBus, getAllExpireActivity, saveModelExpireTaskInfo} from "@/api/busModel";
  import Uediter from '@/views/ueditor/'
  import {getMessageTemplateTask} from "@/api/analy";
  import userMultipleDialog from '@/views/components/org/userMultipleDialog'

  export default {
    name: 'Task',
    components: {Uediter, userMultipleDialog},
    data() {

      return {
        isSpinShow: true,
        checkAll: false,
        isIndeterminate: true,
        rules: {
          chooseNode: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
          ]
        },
        ueditor: {
          value: '',          //编辑器默认内容
          config: {           //设置编辑器宽高
            initialFrameWidth: null,
            initialFrameHeight: 350
          }
        },
        show: false,
        addModel: false,
        alias: 'agree',
        activeName: 'first',
        addForm: {
          id: "",
          emailCreatedContent: "审批任务超时处理提醒。${instSubject}需要您审批，节点名称：${nodeName}",
          msgCreatedContent: "审批任务超时处理提醒。${instSubject}需要您审批，节点名称：${nodeName}",
          mailCreatedContent: "审批任务超时处理提醒。${instSubject}需要您审批，节点名称：${nodeName}",
          emailCreated: false,
          msgCreated: false,
          mailCreated: false,
          day: '',
          hour: '',
          min: '',
          nodes: [],
        },
        tableData: [],
        nodes: [],
        msgData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        msgModal: false,
        show: false,
        index: 0,
        existData: []
      }
    },
    mount() {

    },
    created() {
      // this.getData()
      var query = this.$route.query;
      this.addForm.id = query.id;
      if (query.id) {
        //初始化数据
        this.getAllActivity(query.id)

      }
    },
    methods: {
      handleCheckAllChange(val) {
        this.addForm.nodes = val ? this.nodes : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.nodes.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.nodes.length;
      },
      confirmDialogEvent: function (data) {
        this.addForm.users = data
        this.show = false
      },
      delCommonUsers: function (index) {
        this.addForm.users.splice(index, 1)
      },
      selectAddSignUsers: function (index) {
        this.index = index
        try {
          var node = this.tableData[this.index]
          if (node.activeName == 'created') {
            this.existData = node.userCreatedNotify
          } else {
            this.existData = node.userCompletedNotify
          }
        } catch (e) {
          this.existData = []
        }
        this.show = true
      },
      onSubmit: function () {
      },
      getAllActivity: function (id) {
        getAllExpireActivity(id).then((response2) => {
          if (response2.code == 0) {
            this.tableData = response2.data;
            var existData = response2.existData;
            var nodes = [];
            this.tableData.forEach(function (item) {
              nodes.push(item.id)
            })
            this.nodes = nodes
            this.isSpinShow = false
            if (existData){
              var existDataObj = JSON.parse(existData);
              this.addForm.emailCreatedContent = existDataObj.emailCreatedContent
              this.addForm.msgCreatedContent = existDataObj.msgCreatedContent
              this.addForm.emailCreated = existDataObj.emailCreated
              this.addForm.msgCreated = existDataObj.msgCreated
              this.addForm.mailCreated = existDataObj.mailCreated
              this.addForm.mailCreatedContent = existDataObj.mailCreatedContent
              this.addForm.day = existDataObj.day
              this.addForm.hour = existDataObj.hour
              this.addForm.min = existDataObj.min
              this.addForm.nodes = existDataObj.nodes
            }

          }
        })


      },
      go: function () {
        this.$router.go(-1)
      },
      close: function () {
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      },
      save: function () {
        if (this.addForm.nodes.length>0){
          saveModelExpireTaskInfo(this.addForm.id, this.addForm).then((response2) => {
            if (response2.code == 0) {
              this.$message({"duration":'800',message: '保存成功', type: 'success', customClass: 'zZindex'});
              this.close();
            }
          })
        }else{
          this.$message({"duration":800,message:'请选择节点',type:'warning',customClass:'zZindex'});

          return;
        }



      },

    }

  }

</script>
<style lang="scss" scoped>
  .input_w {
    width: 10% !important;
  }
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }

  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }

  .task-card {
    margin-top: 10px;
  }

  .input_w {
    width: 40% !important;
  }

  .task-card {
    margin-top: 10px;
  }

  .item {
    display: block;
    margin-top: 20px;
    box-shadow: 0 0 20px 0 rgba(204, 207, 227, .45);
    margin-bottom: 10px;

  }

  .left {
    font-size: 16px;
    color: #575757;
  }

  img {
    width: 60px;
    height: 60px;
  }

</style>
